<template>
  <div id="login">
    <div id="contain">
      <div id="left_card">
        <h1>欢迎来到我的 空间</h1>
        <span>Welcome to my space</span>
      </div>
      <div id="right_card">
        <!-- 登录 -->
        <transition name="router_animate">
          <el-card class="el-card" v-if="isLogin">
            <h2>欢迎登录</h2>
            <div class="login">
              <input type="text" v-model="username" placeholder="请输入账号(手机号)" />
              <input type="password" v-model="password" placeholder="请输入密码" />
              <div class="remember">
                <input type="checkbox" id="psd" class="radio" v-model="isRemenber" /><label for="psd"></label
                >记住密码
                <span style="margin-left: 10px" class="hover-color1" @click="changeType">注册</span>
              </div>
              <div class="message">
                <span v-html="error"></span>
              </div>
              <div id="btn">
                <w-button fluid size="lg" trigger="mouseenter" @click="handleLogin">登陆</w-button>
              </div>
            </div>
          </el-card>
        </transition>
        <!-- 注册 -->
        <transition name="router_animate">
          <el-card class="el-card" v-if="!isLogin">
            <h2>欢迎注册</h2>
            <div class="login" action="">
              <input type="text" v-model="username" placeholder="请输电话号码" />
              <input type="password" v-model="password" placeholder="请输入密码" />
              <input type="password" v-model="confirmPassword" placeholder="请确认密码" />
              <div class="remember">
                <span style="margin-left: 10px" class="hover-color1" @click="changeType">登录</span>
              </div>
              <div class="message">
                <span v-html="error"></span>
              </div>
              <div id="btn">
                <w-button fluid size="lg" trigger="mouseenter" @click="handleRegister">注册</w-button>
              </div>
            </div>
          </el-card>
        </transition>
      </div>
    </div>
  </div>
</template>

<script>
import { onMounted, reactive, ref, toRefs } from '@vue/runtime-core'
import { localStorage } from '@/utils'
// import md5 from 'js-md5'
import { useStore } from 'vuex'
import * as axiosApi from './api'
import { useRouter } from 'vue-router'

export default {
  name: 'appLogin',
  setup() {
    const store = useStore()
    const router = useRouter()
    let userLoginForm = reactive({
      username: '',
      password: '',
      confirmPassword: '',
      isLogin: true,
      isRemenber: true
    })
    let error = ref('')
    onMounted(() => {
      getRemenber()
    })
    function validate(type) {
      if (!userLoginForm.username || !userLoginForm.password) {
        $message('账号和密码不能为空', 'error')
      } else if (userLoginForm.password !== userLoginForm.confirmPassword && type !== 'login') {
        $message('两次输入的密码不一致', 'error')
      } else {
        return true
      }
    }
    // 注册
    function handleRegister() {
      if (!validate()) return
      axiosApi
        .register({
          userPhone: userLoginForm.username,
          password: userLoginForm.password
        })
        .then(res => {
          if (res.code === '00000') $message('注册成功') && changeType()
        })
    }
    //获取用户登录信息
    function handleLogin() {
      if (!validate('login')) return
      axiosApi
        .login({
          account: userLoginForm.username,
          password: userLoginForm.password
        })
        .then(() => {
          store.dispatch('updateInfor')
          if (userLoginForm.isRemenber) {
            localStorage('remenber', 'true')
            storageRemenber(userLoginForm.username, userLoginForm.password)
          } else {
            localStorage('remenber', '')
            localStorage('username', '')
            localStorage('password', '')
          }
          router.push('/home')
        })
    }
    // 获取记住密码
    function getRemenber() {
      if (localStorage('remenber')) {
        userLoginForm.username = window.atob(window.atob(localStorage('username')))
        userLoginForm.password = window.atob(window.atob(localStorage('password')))
      } else {
        userLoginForm.username = ''
        userLoginForm.password = ''
      }
    }
    function storageRemenber(username, password) {
      localStorage('username', window.btoa(window.btoa(username)))
      localStorage('password', window.btoa(window.btoa(password)))
    }
    //获取用户信息
    async function getUserInfo() {}
    function changeType() {
      userLoginForm.isLogin = !userLoginForm.isLogin
      userLoginForm.username = ''
      userLoginForm.password = ''
      userLoginForm.confirmPassword = ''
    }
    return {
      ...toRefs(userLoginForm),
      error,
      handleLogin,
      getUserInfo,
      changeType,
      handleRegister
    }
  }
}
</script>

<style lang="scss" scoped>
// 滚动的动画
.router_animate-enter-active {
  animation: rollIn 1s;
}
.router_animate-leave-active {
  animation: rollOut 0.6s;
}
// 向上滑动的动画
.in-enter-active {
  transition: all 1s ease;
}
.in-leave-active {
  transition: all 0.6s ease;
}
.in-enter-from {
  transform: translateY(500px);
}
.in-leave-to {
  transform: translateY(-500px);
}
@keyframes animate {
  0% {
    // filter: hue-rotate(0deg);
    box-shadow: 5px 5px 20px aqua;
  }
  100% {
    // filter: hue-rotate(360deg);
    box-shadow: 5px 5px 20px rgba(0, 255, 255, 0.5);
  }
}
#login {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-image: url('@/assets/banner.gif');
  background-attachment: fixed;
  background-size: 100% 100%;
  background-color: #a7a8bd;
  #contain {
    height: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 25px;
    background-color: rgba(255, 255, 255, 0.1) !important;
    background: linear-gradient(to right, blur(5px) 30%, transparent 30%, blur(5px) 30%);
    /* 5秒 infinite循环播放无限次 linear匀速  */
    animation: animate 1.5s ease infinite alternate;
  }
}
#contain {
  display: flex;
  flex-direction: row;
  text-align: center;
  align-items: center;
  #left_card {
    width: 500px;
    h1 {
      color: white;
      white-space: nowrap;
    }
    span {
      font-size: 1.2rem;
      text-align: center;
      color: white;
      white-space: nowrap;
    }
  }
  #right_card {
    overflow: hidden;
    width: 400px;
    position: relative;
    height: 100%;
    .el-card {
      backdrop-filter: blur(5px);
      position: absolute;
      top: 45px;
      bottom: 45px;
      left: 45px;
      right: 45px;
      border-radius: 25px;
      background-color: rgba(255, 255, 255, 0.1);
    }
  }
}
#right_card {
  // display: flex;
  // justify-content: center;
  // align-items: center;
  h2 {
    margin-bottom: 5px;
  }
  .login {
    padding: 0 25px;
    box-sizing: border-box;
    input {
      width: 100%;
      height: 45px;
      margin-top: 10px;
      border: 1px solid white;
      background-color: rgba(255, 255, 255, 0.5);
      border-radius: 10px;
      font-size: inherit;
      padding-left: 20px;
      outline: none;
    }
  }
  .remember {
    display: flex;
    justify-content: right;
    align-items: center;
    height: 26px;
    font-size: 1rem;
    position: relative;
    .radio {
      height: 1rem;
      width: 1rem;
      display: none;
    }
    label {
      position: relative;
      margin-right: 3px;
      height: 1rem;
      width: 1rem;
      vertical-align: middle;
      border-radius: 50%;
      border: 1px solid black;
    }
    //radio选中后修改labe内的内容 :after 选择器在被选元素的内容后面插入内容。
    input:checked + label::after {
      content: '';
      width: 0.6rem;
      height: 0.6rem;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      background-color: rgba(207, 38, 38, 0.8);
      border: 1px solid rgba(207, 38, 38, 0.8);
    }
  }
  .message {
    font-size: 0.9rem;
    color: red;
  }
  #btn {
    margin: auto;
  }
  .loginbtn {
    width: 100%;
    height: 35px;
    margin-top: 10px;
    border-radius: 10px;
    background-color: rgba(207, 38, 38, 0.8);
  }
}
</style>
